<script setup lang="tsx">
// 导入 Naive UI 组件
import { NButton, NPopconfirm, NTag } from 'naive-ui';
// 导入获取用户列表的 API
import { fetchGetUserListDemo } from '@/service/api';
// 导入本地化函数
import { $t } from '@/locales';
// 导入 Vuex 存储模块
import { useAppStore } from '@/store/modules/app';
// 导入业务常量
import { enableStatusRecord, userGenderRecord } from '@/constants/business';
// 导入自定义表格操作钩子
import { useTable, useTableOperate } from '@/hooks/common/table';
// 导入子组件
import UserOperateDrawer from './modules/user-operate-drawer.vue';
import UserSearch from './modules/user-search.vue';

// 获取 Vuex 存储实例
const appStore = useAppStore();
// 使用自定义表格钩子来管理表格的状态和操作
const {
  columns, // 表格列定义
  columnChecks, // 列检查
  data, // 表格数据
  getData, // 获取数据函数
  getDataByPage, // 根据页码获取数据函数
  loading, // 加载状态
  mobilePagination, // 移动端分页
  searchParams, // 搜索参数
  resetSearchParams // 重置搜索参数函数
} = useTable({
  apiFn: fetchGetUserListDemo, // API 函数
  showTotal: true, // 显示总数
  apiParams: {
    pagenum: 1,
    pagesize: 10,
    // 如果你想在表单中使用搜索参数，需要定义以下属性，并且值为 null
    // 值不能是 undefined，否则表单中的属性将不具有响应性
    cate_id: null,
    state: null
  },
  columns: () => [
    {
      type: 'selection',
      align: 'center',
      width: 48
    },
    {
      key: 'cate_name',
      title: $t('page.manage.user.cate_name'), // 用户名列标题
      align: 'center', // 居中对齐
      minWidth: 100 // 最小列宽
    },
    {
      key: 'id',
      title: $t('page.manage.user.id'), // 用户名列标题
      align: 'center', // 居中对齐
      minWidth: 100 // 最小列宽
    },
    {
      key: 'state',
      title: $t('page.manage.user.state'), // 用户名列标题
      align: 'center', // 居中对齐
      minWidth: 100 // 最小列宽
    },
    {
      key: 'pub_date',
      title: $t('page.manage.user.pub_date'), // 用户名列标题
      align: 'center', // 居中对齐
      minWidth: 100 // 最小列宽
    },
    {
      key: 'title',
      title: $t('page.manage.user.title'), // 用户名列标题
      align: 'center', // 居中对齐
      minWidth: 100 // 最小列宽
    },
    {
      key: 'image',
      title: $t('page.manage.user.image'),
      align: 'center',
      width: 200,
      render: row => {
        return <n-image src={row.img} alt="User Image" />;
      }
    }
  ]
});

// 使用自定义表格操作钩子来管理操作状态
const {
  drawerVisible, // 抽屉可见性
  operateType, // 操作类型
  editingData, // 编辑的数据
  handleAdd, // 处理添加操作
  handleEdit, // 处理编辑操作
  checkedRowKeys, // 选中的行键
  onBatchDeleted, // 批量删除操作
  onDeleted // 单个删除操作
  // closeDrawer 关闭抽屉函数（未使用）
} = useTableOperate(data, getData);

// 处理批量删除操作
async function handleBatchDelete() {
  // 打印选中的行键
  console.log(checkedRowKeys.value);

  // 执行批量删除操作
  onBatchDeleted();
}

// 处理单个删除操作
function handleDelete(id: number) {
  // 打印删除的 ID
  console.log(id);

  // 执行删除操作
  onDeleted();
}

// 处理编辑操作
function edit(id: number) {
  handleEdit(id);
}
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <!-- 用户搜索组件 -->
    <UserSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
    <!-- 用户列表卡片 -->
    <NCard :title="$t('page.manage.user.title')" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
      <template #header-extra>
        <!-- 表格头部操作 -->
        <TableHeaderOperation
          v-model:columns="columnChecks"
          :disabled-delete="checkedRowKeys.length === 0"
          :loading="loading"
          @add="handleAdd"
          @delete="handleBatchDelete"
          @refresh="getData"
        />
      </template>
      <!-- 数据表格 -->
      <NDataTable
        v-model:checked-row-keys="checkedRowKeys"
        :columns="columns"
        :data="data"
        size="small"
        :flex-height="!appStore.isMobile"
        :scroll-x="962"
        :loading="loading"
        remote
        :row-key="row => row.id"
        :pagination="mobilePagination"
        class="sm:h-full"
      />
      <!-- 用户操作抽屉 -->
      <UserOperateDrawer
        v-model:visible="drawerVisible"
        :operate-type="operateType"
        :row-data="editingData"
        @submitted="getDataByPage"
      />
    </NCard>
  </div>
</template>

<style scoped></style>
